<template>
	<view class="content">
		<view class="head">
			<!-- 周次按钮 -->
			<view class="left_text" @click="last_week">
				上一周
			</view>
			<view class="text">
				第{{ currentWeek }}周
				<uni-icons type="bottom" size="16" color="#000000" @click="openPopup">
				</uni-icons>
			</view>
			<!-- 弹窗部分 -->
			<popup v-if="isPopupOpen" position="bottom">
				<view class="popup-header">周次选择</view>
				<view class="popup-content">
					<view class="week-selector">
						<view class="week-item" v-for="week in 18" :key="week" @click="selectWeek(week)">
							{{ week }}
						</view>
					</view>
				</view>
				<view class="popup-close-btn" @click="closePopup">关闭</view>
			</popup>
			<view class="right_text" @click="next_week">
				下一周
			</view>
		</view>
		<!-- 星期日期 -->
		<view class="time-show">
			<text class="txt" selectable space="ensp">
				星期\n日期
			</text>
			<view class="time-show-content">
				<!-- 第一行：显示周一到周日 -->
				<view class="week-row">
					<text class="week-day" v-for="(day, index) in weekdays" :key="index">{{ day }}</text>
				</view>
				<!-- 第二行：显示日期，并与周数对应 -->
				<view class="date-row">
					<text class="date-show" v-for="(item, index) in weekdays" :key="index"
						:class="isToday(index) ? 'text-content-today' : 'text-content'">{{ dates[index] }}</text>
				</view>
			</view>
		</view>
		<view class="timetable">
			<view class="row" v-for="(item, index) in timetableItems" :key="index">
				<view class="timestamp">
					<view class="cell">{{ item.index }}</view>
					<view class="cell">
						<view>{{ item.startTime }}</view>
						<view>{{ item.endTime }}</view>
					</view>
				</view>
				<view class="corse-cell" v-for="day in weekDays" :key="day">
					<view v-if="item[day].length === 0"></view>
					<view v-else-if="item[day].length === 1">
						<view class="course single-course" :style="{
		            background: item[day][0].backgroundColor,
		            'border-color': item[day][0].borderColor,
		            color: item[day][0].textColor,
		            height: (item[day][0].length * 100) + 'px', // 设置方框高度和课程长度对应
		            'border-radius': item[day][0].length > 1 ? '8px 8px 0 0' : '8px' // 设置圆角矩形
		          }" @click="handleCourseClick(item[day][0])">
							<view class="course-name">
								{{ item[day][0].name }}
							</view>
						</view>
					</view>
					<view v-else-if="item[day].length > 1">
						<view class="course-group">
							<view v-for="(course, idx) in item[day]" :key="course.name" class="course multi-course"
								:style="{
		              background: course.backgroundColor,
		              'border-color': course.borderColor,
		              color: course.textColor,
		              height: (course.length * 70) + 'px', // 设置方框高度和课程长度对应
		              'border-radius': idx === 0 ? '8px 8px 0 0' : idx === item[day].length - 1 ? '0 0 8px 8px' : 'none' // 设置圆角矩形
		            }">
								{{ course.name }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				weekdays: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
				dates: [],
				modalItem: [], // 在这里定义modalItem并初始化为空数组
				currentWeek: 1, // 当前周数
				isPopupOpen: false, // 控制弹窗显示
				weekDays: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
				timetableItems: [
					// 每节课的具体数据根据实际情况填写
					// 示例数据：
					{
						index: 1,
						startTime: '08:20',
						endTime: '09:50',
						周一: [{
							name: 'Algeb\nra B121 hh 8:20-9:50',
							length: 1,
							backgroundColor: '#f5f5f5',
							borderColor: 'blue',
							textColor: 'blue'
						}, ],
						周二: [{
							name: 'none',
							length: 1,
							backgroundColor: '#ffffff',
							borderColor: 'white',
							textColor: 'white'
						}, ],
						周三: [{
							name: 'Scien\nce B101 aa 8:20-9:50',
							length: 1,
							backgroundColor: '#f5f5f5',
							borderColor: 'green',
							textColor: 'green'
						}],
						周四: [{
							name: 'Chine\nse C122 bb 8:20-9:50',
							length: 1,
							backgroundColor: '#f5f5f5',
							borderColor: 'orange',
							textColor: 'orange',
						}],
						周五: [{
							name: 'Histo\nry B101 aa 8:20-9:50',
							length: 1,
							backgroundColor: '#f5f5f5',
							borderColor: 'red',
							textColor: 'red'
						}],
						周六: [{
							name: 'none',
							length: 1,
							backgroundColor: '#ffffff',
							borderColor: 'white',
							textColor: 'white'
						}],
						周日: [{
							name: 'none',
							length: 1,
							backgroundColor: '#ffffff',
							borderColor: 'white',
							textColor: 'white'
						}]
					},
					{
						index: 2,
						startTime: '10:10',
						endTime: '11:40',
						周一: [{
							name: 'none',
							length: 1,
							backgroundColor: '#ffffff',
							borderColor: 'white',
							textColor: 'white'
						}],
						周二: [{
							name: 'Algeb\nra B121 hh 10:10-11:40',
							length: 1,
							backgroundColor: '#f5f5f5',
							borderColor: 'blue',
							textColor: 'blue'
						}],
						周三: [{
							name: 'Chine\nse C121 bb 10:10-11:40',
							length: 1,
							backgroundColor: '#f5f5f5',
							borderColor: 'orange',
							textColor: 'orange'
						}],
						周四: [{
							name: 'none',
							length: 1,
							backgroundColor: '#ffffff',
							borderColor: 'white',
							textColor: 'white'
						}],
						周五: [{
							name: 'Engli\nsh C121 ee 10:10-11:40',
							length: 1,
							backgroundColor: '#f5f5f5',
							borderColor: 'purple',
							textColor: 'purple'
						}],
						周六: [{
							name: 'none',
							length: 1,
							backgroundColor: '#ffffff',
							borderColor: 'white',
							textColor: 'white'
						}],
						周日: [{
							name: 'none',
							length: 1,
							backgroundColor: '#ffffff',
							borderColor: 'white',
							textColor: 'white'
						}]
					},
					{
						index: 3,
						startTime: '14:00',
						endTime: '15:30',
						周一: [{
							name: 'Algeb\nra B121 hh 14:00-15:30',
							length: 1,
							backgroundColor: '#f5f5f5',
							borderColor: 'blue',
							textColor: 'blue'
						}, ],
						周二: [{
							name: 'none',
							length: 1,
							backgroundColor: '#ffffff',
							borderColor: 'white',
							textColor: 'white'
						}, ],
						周三: [{
							name: 'Scien\nce B121 aa 14:00-15:30',
							length: 1,
							backgroundColor: '#f5f5f5',
							borderColor: 'green',
							textColor: 'green'
						}],
						周四: [{
							name: 'Chine\nse B121 bb 14:00-15:30',
							length: 1,
							backgroundColor: '#f5f5f5',
							borderColor: 'orange',
							textColor: 'orange',
						}],
						周五: [{
							name: 'Histo\nry B121 aa 14:00-15:30',
							length: 1,
							backgroundColor: '#f5f5f5',
							borderColor: 'red',
							textColor: 'red'
						}],
						周六: [{
							name: 'none',
							length: 1,
							backgroundColor: '#ffffff',
							borderColor: 'white',
							textColor: 'white'
						}],
						周日: [{
							name: 'none',
							length: 1,
							backgroundColor: '#ffffff',
							borderColor: 'white',
							textColor: 'white'
						}]
					},
					{
						index: 4,
						startTime: '15:50',
						endTime: '17:20',
						周一: [{
							name: 'Chine\nse B106 hh 15:50-17:20',
							length: 1,
							backgroundColor: '#f5f5f5',
							borderColor: 'orange',
							textColor: 'orange',
						}, ],
						周二: [{
							name: 'none',
							length: 1,
							backgroundColor: '#ffffff',
							borderColor: 'white',
							textColor: 'white'
						}, ],
						周三: [{
							name: 'Engli\nsh B106 ee 15:50-17:20',
							length: 1,
							backgroundColor: '#f5f5f5',
							borderColor: 'purple',
							textColor: 'purple'
						}],
						周四: [{
							name: 'Algeb\nra B121 hh 15:50-17:20',
							length: 1,
							backgroundColor: '#f5f5f5',
							borderColor: 'blue',
							textColor: 'blue'
						}],
						周五: [{
							name: 'none',
							length: 1,
							backgroundColor: '#ffffff',
							borderColor: 'white',
							textColor: 'white'
						}],
						周六: [{
							name: 'none',
							length: 1,
							backgroundColor: '#ffffff',
							borderColor: 'white',
							textColor: 'white'
						}],
						周日: [{
							name: 'none',
							length: 1,
							backgroundColor: '#ffffff',
							borderColor: 'white',
							textColor: 'white'
						}]
					},
					{
						index: 5,
						startTime: '19:00',
						endTime: '20:30',
						周一: [{
							name: 'none ',
							length: 1,
							backgroundColor: '#ffffff',
							borderColor: 'white',
							textColor: 'white',
						}, ],
						周二: [{
							name: 'none',
							length: 1,
							backgroundColor: '#ffffff',
							borderColor: 'white',
							textColor: 'white'
						}, ],
						周三: [{
							name: 'Algeb\nra B121 hh 15:50-17:20',
							length: 1,
							backgroundColor: '#f5f5f5',
							borderColor: 'blue',
							textColor: 'blue'
						}],
						周四: [{
							name: 'none',
							length: 1,
							backgroundColor: '#ffffff',
							borderColor: 'white',
							textColor: 'white'
						}],
						周五: [{
							name: 'none',
							length: 1,
							backgroundColor: '#ffffff',
							borderColor: 'white',
							textColor: 'white'
						}],
						周六: [{
							name: 'none',
							length: 1,
							backgroundColor: '#ffffff',
							borderColor: 'white',
							textColor: 'white'
						}],
						周日: [{
							name: 'none',
							length: 1,
							backgroundColor: '#ffffff',
							borderColor: 'white',
							textColor: 'white'
						}]
					},
				],
			};
		},
		created() {
			this.generateDates();
		},
		methods: {
			generateDates() {
				const today = new Date();
				const currentDayOfWeek = today.getDay(); // 0 (Sunday) to 6 (Saturday)
				const startDate = new Date(today);
				startDate.setDate(startDate.getDate() - currentDayOfWeek +
					1); // Get the first day (Monday) of the current week
				// Generate dates for the current week
				for (let i = 0; i < 7; i++) {
					const currentDate = new Date(startDate);
					currentDate.setDate(currentDate.getDate() + i);
					const formattedDate = this.formatDate(currentDate);
					this.dates.push(formattedDate);
				}
			},
			//日期正则表达式
			formatDate(date) {
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${month}-${day}`;
			},
			//判断是否为当天，若是则进行颜色标注下显示
			isToday(index) {
				const today = new Date();
				const targetDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + index + (this
					.currentWeek - 1) * 7);
				const targetYear = targetDate.getFullYear();
				const targetMonth = targetDate.getMonth();
				const targetDay = targetDate.getDate() - today.getDay() + 1;
				const date = new Date().toLocaleDateString();
				console.log(date);
				console.log(targetYear);
				console.log(targetMonth);
				console.log(targetDay);
				return (
					today.getFullYear() === targetYear &&
					today.getMonth() === targetMonth &&
					today.getDate() === targetDay
				);

			},
			last_week() {
				// 输出 true 或 false
				if (this.currentWeek > 1) {
					this.currentWeek--;
					this.updateWeekDates();
				}
			},
			next_week() {
				if (this.currentWeek < 18) {
					this.currentWeek++;
					this.updateWeekDates();
				}
			},
			//更新周次
			updateWeekDates() {
				const today = new Date();
				const currentDayOfWeek = today.getDay();
				const startDate = new Date(today);
				startDate.setDate(startDate.getDate() - currentDayOfWeek + 1 + (this.currentWeek - 1) * 7);
				this.dates = [];
				for (let i = 0; i < 7; i++) {
					const currentDate = new Date(startDate);
					currentDate.setDate(currentDate.getDate() + i);
					const formattedDate = this.formatDate(currentDate);
					this.dates.push(formattedDate);
				}
			},
			openPopup() {
				this.isPopupOpen = true;
			},
			// 关闭弹窗
			closePopup() {
				this.isPopupOpen = false;
			},
			// 选择周次
			selectWeek(week) {
				this.currentWeek = week;
				this.closePopup(); // 选择后关闭弹窗
			},
			handleCourseClick(course) {
				console.log('Clicked on course:', course.name);
				// 弹出课程信息的弹窗
				const [name, classInfo, teacher, time] = course.name.split(' ');
				this.modalItem[0] = "课程: " + name;
				this.modalItem[1] = "教室: " + classInfo;
				this.modalItem[2] = "教师: " + teacher;
				this.modalItem[3] = "时间: " + time;
				// 拼接成带有换行符的字符串
				const content = this.modalItem.join('\n').replace(/\n/g, '');
				uni.showModal({
					title: '课程信息',
					content: /* JSON.stringify(this.modalItem) */ content,
					showCancel: false,
					confirmText: '确定'
				});
			}
		},
	}
</script>
<style>
	/*顶部这一行*/
	.head {
		display: flex;
		flex-direction: row;
		align-items: stretch;
		justify-content: space-between;
		margin-bottom: 2%;
	}
	.left_text {
		font-size: 35rpx;
		font-weight: bold;
		margin-left: 5%;
	}
	.text {
		font-size: 35rpx;
		font-weight: bold;
	}
	.right_text {
		font-size: 35rpx;
		font-weight: bold;
		margin-right: 5%;
	}
	/*时间这一行*/
	.time-show {
		display: flex;
		align-items: center;
		/* 垂直居中对齐 */
	}
	.time-show-content {
		flex: 1;
	}
	.txt {
		margin-top: 0%;
		margin-left: 0.5%;
		color: #555555;
	}
	.week-row {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-left: 3%;
		font-size: 16px;
	}
	.week-day {
		flex: 1;
		text-align: center;
	}
	.date-row {
		display: flex;
		flex-direction: row;
		padding-left: 0px;
		padding: 0px;
		font-size: 8px;
		margin-left: 1.25%;
	}
	.date-show {
		text-align: center;
		padding: 0upx;
		padding-left: 0px;
		font-size: 8px;
		margin-left: 4.35%;
	}
	.text-content {
		color: #000000;
	}
	.text-content-today {
		/*当天样式提醒*/
		color: #000000;
		background-color: aquamarine;
	}
	/*弹窗提示*/
	.popup-container {
		/* 样式设置 */
		width: 160px;
		background-color: #f8f9fa;
		border: 1px solid #ced4da;
		border-radius: 4px;
		padding: 8px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	}
	.popup-content {
		/* 样式设置 */
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.week-selector {
		/* 样式设置 */
		display: flex;
		flex-wrap: wrap;
		text-align: center;
	}
	.week-item {
		/* 样式设置 */
		text-align: center;
		width: 25%;
		padding: 6px 0;
		color: #007bff;
		cursor: pointer;
		user-select: none;
		transition: background-color 0.3s ease;
	}
	.week-item:hover {
		background-color: #007bff;
		color: #fff;
	}
	/*课程表*/
	.timetable {
		font-family: Arial, sans-serif;
		width: 100%;
	}
	.header-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #f0f0f0;
		padding: 5px;
		font-weight: bold;
	}
	.row {
		display: flex;
		align-items: center;
		margin-bottom: 8px;
		margin-left: 2%;
		flex-direction: row;
		margin-right: 12%;
	}
	.timestamp {
		margin-left: 0%;
		font-size: 5rpx;
	}
	.cell {
		width: 10%;
		padding-right: 2%;
		margin-right: 2%;
		margin-left: 0%;
	}
	.corse-cell {
		width: 11%;
		padding-right: 0%;
		margin-right: 1.25%;
		margin-left: 2.82%;
	}
	.cell:nth-child(2) {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.u-line {
		width: 100%;
	}
	.course {
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid;
		margin-bottom: 5px;
		cursor: pointer;
		white-space: pre-wrap;
	}
	.single-course {
		border-radius: 8px;
		/* 设置圆角矩形 */
	}
	.multi-course {
		/* 使多个课程占满宽度 */
		border-width: 1px 0;
		/* 仅显示上下边框 */
	}
</style>